Introduction to ARIA Webinar – Part of the Accessible Technology Webinar Series March 27, 2014

Slide 1 Introduction to ARIA
The Accessible Technology Webinar Series is sponsored by the Great Lakes ADA Center and the Pacific ADA Center, both members of the ADA National Network.
•	The Session begins at 1:00 pm CST
•	We will be testing audio quality periodically.

The content and materials of this training cannot be used or distributed without permission. This training is funded under award #H133A060097 from the U.S. Department of Education through the auspices of the National Institute on Disability and Rehabilitation Research (NIDRR. For permission to use training content or obtain copies of materials used as part of this program please contact us by email at adata@adagreatlakes.org or toll free (800) 949-4232 (V/TTY) in IL, IN, MI, MN, OH, and WI.  For other all other states call (312) 413-1407
Slide 2 Listening to the Webinar
•	The audio for today’s webinar is being broadcast through your computer. Please make sure your speakers are turned on or your headphones are plugged in.
•	You can control the audio broadcast via the Audio & Video panel.  You can adjust the sound by “sliding” the sound bar left or right.
•	If you are having sound quality problems check your audio controls by going through the Audio Wizard which is accessed by selecting the microphone icon on the Audio & Video panel 
Slide 3 Listening to the Webinar, continued
If you do not have sound capabilities on your computer or prefer to listen by phone, dial: 1-712-432-3066 Pass Code: 148937. This is not a Toll Free number.

Slide 4 Listening to the Webinar, continued
MOBILE Devices supported include iPhone, iPad, Android Devices, Kindle Fire HD)** Individuals can download the free Blackboard Collaborate App from the Apple Store, Google Play or Amazon
**Closed Captioning is not visible via the Mobile App and there is limited access to the white board for individual's using voice over technology
  Slide 5 Captioning
•	Real-time captioning is provided during this webinar.
•	The caption screen can be accessed by choosing the CC icon in the Audio & Video panel.
•	Once selected you will have the option to resize the captioning window, change the font size and save the transcript.

Slide 6 Submitting Questions
•	You may type and submit questions in the Chat Area Text Box or press Control-M and enter text in the Chat Area
•	If you are connected via a mobile device you may submit questions in the chat area within the App                                                                                                       
•	If you are listening by phone and not logged in to the webinar, you may ask questions by emailing them to webinars@ada-audio.org

Please note: This webinar is being recorded and can be accessed on the website at www.ada-audio.org within 24 hours after the conclusion of the session.
 
Slide 7 Customize Your View
•	Resize the Whiteboard where the Presentation slides are shown to make it smaller or larger by choosing from the drop down menu located above and to the left of the whiteboard.   The default is “fit page”

Slide 8 Customize Your View continued
•	Resize/Reposition the Chat, Participant and Audio & Video panels by “detaching” and using your mouse to reposition or “stretch/shrink”.  Each panel may be detached using the icon in the upper right corner of each panel.

Slide 9 Setting Preferences
•	Depending on your system settings you may receive visual and audible notifications when individuals enter/leave the webinar room or when other actions are taken by participants.  This can be distracting.
•	To turn off notifications (audible/visual)
–	Select “Edit” from the tool bar at the top of your screen
–	From the drop down menu select “Preferences”
–	Scroll down to “General”
•	select “Audible Notifications”   Uncheck anything you don’t want to receive and “apply”
•	Select “Visual Notifications” Uncheck anything you don’t want to receive and “apply”
–	For Screen Reader User – Set preferences through the setting options within the Activity Window (Ctrl+slash opens the activity window)

Slide 10 Technical Assistance
•	If you experience any technical difficulties during the webinar:
1.	Submit a message regarding your issue via the chat area and the Moderator will address your concern via a private chat with you and/or refer it to one of the Great Lakes ADA Center IT Staff to contact you off line; or 
2.	Email webinars@ada-audio.org; or
3.	Call 877-232-1990 (V/TTY) 

Slide 11 Background Basics
•	Part of the Web Accessibility Initiative (WAI) at the W3C.
•	ARIA stands for Accessible Rich Internet Applications
•	ARIA has been around for several years and works in HTML4, XHTML and HTML5
•	Sometimes referred to as WAI-ARIA, sometimes just ARIA. 

Slide 12 The Purpose of ARIA
•	To make web content and web applications more accessible
•	On the application side, ARIA helps users manage interactive content such as widgets, drop down menus, events, drag and drop.
•	On the content side, ARIA describes  navigation techniques to mark regions and common web structures such as menus, primary content, secondary content, and banner information. 

Slide 13 ARIA in Browsers
•	Older browsers that do not recognize ARIA simple ignore it. The content renders without it.
•	All current major browsers recognize ARIA.
•	ARIA is supported on current versions of iOS, Opera Mini, Android, Blackberry, Opera Mobile, Chrome for Android, Firefox for Android, and IE Mobile.

Slide 14 ARIA in screen readers
•	JAWS 8 and Window-Eyes 5.5+ partially support WAI-ARIA.
•	Jaws 10+ supports WAI-ARIA. 
•	FireVox, a self-voicing extension to Firefox, also supports WAI-ARIA via direct DOM access. 
•	NVDA partially supports WAI-ARIA.

Slide 15 Roles
•	The W3C taxonomy for ARIA uses the word Role.
•	ARIA roles define what an element is or does. 
Slide 16 Example ARIA Roles
•	Roles that act as standalone user interface widgets or as part of larger, composite widgets: alert, progress bar, timer
•	Roles that act as composite user interface widgets. These roles typically act as containers that manage other, contained widgets: listbox, radiogroup
•	Roles that describe document structures that organize content in a page: article, img, listitem

Slide 17 The Landmark Roles
•	Roles that act as navigational landmarks
◦	application
◦	banner
◦	complementary
◦	contentinfo
◦	form
◦	main
◦	navigation
◦	search

Slide 18 Landmark Roles Defined
•	Application: A region declared as a web application, as opposed to a web document. Assistive devices have different browsing modes for applications. Set the role of application on the element that encompasses the entire application.
•	Banner: Site identity such as the logo or site search. The banner role can only be used once per page.

Slide 19 Landmark Roles Defined
•	Complementary: supporting information relevant to the main topic, but still meaningful when separated from the main content. This role can be used multiple times on a page.
•	Contentinfo: a region that contains information about the parent document, usually in a footer element. Contentinfo can only be used once on a page.

Slide 20 Landmark Roles Defined
•	Form: contains a collection of items and objects that, as a whole, combine to create a form. Can be used more than once per page.
•	Main: the main content of a document. Can only be used once per page.
Slide 21 Landmark Roles Defined
•	Navigation: a collection of navigation elements usually links. Can be used more than once per page.
•	Search: a search element. Can be used more than once.

Slide 22 ARIA Roles and HTML Elements
•	According to Using WAI-ARIA in HTML,
•	An ARIA role overrides HTML semantics. For example:
•	<h1 role=button>text</h1>
•	Becomes this in the accessibility tree:
•	<button>text</button>

Slide 23 ARIA Roles and HTML Elements
•	On the other hand, ARIA roles do not change function
•	This:
•	<button role=heading>text</button>
•	Becomes this in the accessibility tree:
•	<heading>text</heading>
•	But it is can still be pressed

Slide 24 ARIA Roles and HTML5 Elements
•	Some HTML5 elements are semantic matchups for ARIA roles, for example the nav element should be used with the navigation role
•	The header element in HTML5 can be used multiple times on a page, but the role banner can only be used to identify the header element containing the site identification
Slide 25 Seeing or Hearing ARIA in Action
•	Tools exist for developers who don’t have access to a screen reader.
•	Web Developer Toolbar for Firefox, Opera and Chrome 
Slide 26 Web Developer Toolbar Display
Screen shot of web developer toolbar display
Slide 27 More Web Developer Toolbar Display
Second screen shot of more developer toolbar display
Slide 28 With JAWS screen reader	
•	Here’s a quick video from Nomensa demonstrating how JAWS reads landmark ARIA roles on their home page.
•	http://youtu.be/IhWMou12_Vk
Slide 29 It’s One Little Attribute
•	Adding ARIA landmark roles to standard HTML pages is easy!
•	When working in any text editor, or in a WYSIWYG tool such as Dreamweaver, you simply add a role attribute to the appropriate element and you’re done.
Slide 30 Add ARIA Roles to Your Work 
•	In a WYSIWYG tool like Dreamweaver, add it Code View.
Screenshot of Dreamweaver
Slide 31 A Closer Look 
Screenshot of HTML code
Slide 32 Another Example 
Screenshot of div class
Slide 33 More Examples 
Screenshot of html code for aside role
Slide 34 One More Example 
Screenshot of html code for footer role
Slide 35 A Search Landmark	
The search role typically goes on the form element or a div surrounding the search form.
<form role="search"> 
<label for=”search">search</label>
<input id=”search" type="text" size="20">
 ... 
</form> 

Slide 36 In WordPress
•	Most modern themes will have the ARIA roles baked in.
•	Easy to check with the Web Developer Toolbar.
•	With older themes you can add them easily by using a child theme.
•	Most of the time, all you put in the folder for a child theme is a style.css file, BUT . . . 

Slide 37 WordPress Child Themes
•	You can modify the PHP pages in a theme to include ARIA roles.
•	Screenshot of PHP pages to include ARIA
Slide 38 Header.php
•	In my theme, I found the header.php file, saved a copy in the child theme folder, with this addition.
Screenshot of a header.php
Slide 39 Footer.php and Sidebar.php
•	Did a similar thing to the footer.php file and sidebar.php and suddenly the out-of-date WordPress theme was an up-to-date theme.
Screenshot of footer.php
Slide 40 Beyond Landmarks: Other ARIA techniques
•	Also useful to front-end developers
•	aria-required="true” in required form input fields.
•	<label for="username">User name: </label> <input type="text" name="username" id="username" aria-required="true”>[*] 

Slide 41 With the HTML5 Required Attribute
•	<label for="username">User name: </label> <input type="text" name="username" id="username" required aria-required="true”>[*] 
Slide 42 aria-label identifies objects
•	Provides a label that can be read by assistive technology.
•	Useful in labeling landmark roles that might be used more than once on a page.
•	<nav role="navigation" aria-label=“primary"> </nav> 
•	<nav role="navigation" aria-label=“secondary"> </nav>
•	Use any text or phrase you need in aria-label

Slide 43 More on aria-label 
•	Useful when there can be no text label attached to an object, for example, the red X that closes a browser window or other close buttons using an X
•	Useful for things like identifying multiple input fields for phone numbers.
Slide 44 aria-labeledby 
•	This attribute connects a link to a heading or some text related to it. The heading or text needs an id.
•	<h2 id="headline">Hunger Games Tops Box Office</h2> 
•	<p>The Hunger Games topped all other releases in this weekend’s box office.<a href="news.html" aria-labelledby="headline">Read more...</a></p>

Slide 45 More aria-labeledby
<p role="complementary" aria-labelledby="hdr1"> 
<h1 id="hdr1"> Top News Stories </h1> 
</p>
Slide 46 aria-describedby
•	aria-describedby can be applied to an image to provide a long description, where that text description is on the same page as the image. <img src=”scubagear.jpg" alt=”Scuba Gear" aria-describedby="p1">  <p id="p1">This man in full scuba gear shows each piece of gear with a label. The gear includes...</p> 
Slide 47 Questions
You may type and submit questions in the Chat Area Text Box or press Control-M and enter text in the Chat Area

Slide 48 Resources
•	WAI-ARIA 1.0 Authoring Practices
•	ARIA Techniques for WCAG 2.0
Slide 49 
Thank you for participating!  Next Session is May 22, 2014, Web Accessibility Analytics and Open Source Tools for Inspecting and Auditing Web Resources for Accessibility
The session today was recorded and will be archived at 
http://ada-audio.org/Archives/AccessibleTech/